<!DOCTYPE html>
<!-- html:5 缩写-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app {
        display: block;
        width: 80vw;
    }
    
    .warn {
        color: red;
    }
    
    a {
        text-decoration: none;
    }
    
    table {
        margin-top: 20px;
        user-select: none;
        width: 100%;
        text-align: left;
        border: none;
        /* 设置表格中单元格间距为0  */
        border-spacing: 0px;
        border: 3px solid rgba(173, 173, 173, 0.099);
        border-radius: 15px;
        /* 为表格设置合并边框模型 */
        border-collapse: collapse;
    }
    
    thead {
        height: 3em;
        background-color: rgba(250, 250, 250, 0.717);
    }
    
    th {
        border-bottom: 3px solid rgba(173, 173, 173, 0.099);
    }
    
    tr {
        box-sizing: border-box;
        height: 4em;
        border-bottom: 3px solid rgba(173, 173, 173, 0.099);
    }
    
    td {
        padding: 0;
    }
    
    .dataRows {
        transition: all 1s ease-in-out;
    }
    
    .dataRows:hover {
        background-color: rgb(246, 247, 252)
    }
    
    .active {
        background-color: rgb(246, 247, 252)
    }
    
    input {
        padding: 5px;
        outline: none;
        border: 2px solid rgba(173, 173, 173, 0.338);
        border-radius: 5px;
    }
    
    button {
        cursor: pointer;
    }
    
    .Btn {
        border: none;
        height: 2em;
        border-radius: 5px;
        color: white;
    }
    
    .submitBtn {
        background-color: rgb(56, 128, 235);
        margin-left: 5px;
    }
    
    .costTotal {
        font-size: 2em;
        font-weight: bolder;
        color: red;
    }
    
    .empty {
        margin-top: 20px;
        user-select: none;
        width: 100%;
        height: 200px;
        line-height: 200px;
        font-size: 3em;
        background-color: rgba(185, 193, 206, 0.717);
        border-radius: 15px;
        text-align: center;
    }
    
    #chartArea {
        width: 80vw;
        height: 50vh;
    }
</style>

<body>
    <!-- div#app 缩写  综合案例 Todolist-->
    <div id="app">
        <div>
            <input placeholder="消费名称" @keyup.enter="addCostRecord" v-model.trim="newCostName" type="text">
            <input placeholder="消费价格" @keyup.enter="addCostRecord" v-model.number="newCost" type="text">
            <button @click="addCostRecord" class="submitBtn Btn">添加账单</button>
        </div>
        <table v-if="costList.length!=0">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="dataRows" v-for="(item, index) in costList" :key="item.id">
                    <td>
                        {{index+1}}
                    </td>
                    <td>
                        {{item.name}}
                    </td>
                    <td :class="{warn:item.price.toFixed(2)>=500}">
                        <!-- 注意！数据类型错误将导致.toFixed()无法识别为函数 -->
                        {{item.price.toFixed(2)}}
                    </td>
                    <td>
                        <a href="#" @click.prevent="remove(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <span>消费总计：￥</span>
                        <span class="costTotal">{{TotalCost}}</span>
                    </td>
                </tr>
            </tfoot>
        </table>
        <div class="empty" v-else>🛒空空如也</div>
        <div id="chartArea"></div>
    </div>
    <script src="vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script>
        // const defaultArr = [{
        //     id: 1,
        //     names: "手表",
        //     cost: 299

        // }, {
        //     id: 2,
        //     // 双击选中后按引号键可以直接将选中的字符用双引号包裹
        //     names: "棉大衣",
        //     cost: 599
        // }, {
        //     id: 3,
        //     names: "球鞋",
        //     cost: 299
        // }, {
        //     id: 4,
        //     names: "鸭舌帽",
        //     cost: 99
        // }, ]
        const app = new Vue({
            el: '#app',
            data: {
                // 运用||运算符短路运算，若localstorage中没有取到相关数据，则初始化为默认数组
                newCostName: '',
                newCost: '',
                costList: '',
            },
            created() {
                this.getList();
            },
            mounted() {
                // 基于准备好的dom，初始化echarts实例
                this.myChart = echarts.init(document.querySelector("#chartArea"))
                    // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '消费记账清单',
                        subtext: '消费明细',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [{
                        name: '消费名称',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                this.myChart.setOption(option);
            },
            methods: {
                async addCostRecord() {
                    if (!this.newCostName) {
                        alert("请输入名字")
                        this.newCostName = ""
                        this.newCost = ""
                        return
                    }
                    // 类型判断
                    if (typeof this.newCost !== "number" || !(this.newCost > 0)) {
                        alert("请输入正确的消费值")
                        this.newCostName = ""
                        this.newCost = ""
                        return
                    }
                    const res = await axios.post("https://applet-base-api-t.itheima.net/bill", {
                        creator: "Shio",
                        name: this.newCostName,
                        price: this.newCost,
                    })
                    this.newCostName = ""
                    this.newCost = ""
                    this.getList()
                },
                async remove(target) {
                    // 删除指定数据 delete
                    const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${target}`)
                    this.getList()
                },
                // 封装axios请求 get
                async getList() {
                    const res = await axios.get("https://applet-base-api-t.itheima.net/bill", {
                        params: {
                            creator: "Shio"
                        }
                    })
                    this.costList = res.data.data
                        // 将更新后的数据渲染成图表
                    this.myChart.setOption({
                        series: [{
                            data: this.costList.map(item => ({
                                value: item.price,
                                name: item.name
                            })),
                        }]
                    })
                }
            },
            computed: {
                TotalCost() {
                    return (this.costList.reduce((sum, item) => sum + item.price, 0)).toFixed(2)
                        // 扩展写法，注意需要return
                        // return (this.fruitList.reduce((sum, item) => {
                        //     if (item.select) {
                        //         return sum + item.subTotal
                        //     } else {
                        //         return sum
                        //     }).toFixed(2)
                        // })
                },
            },
        })
    </script>
</body>

</html>